  <template>
    <div class="message">
      <el-carousel
          height="100px"
          direction="vertical"
          type="card"
          :autoplay="true"
          :activeIndex.sync="activeIndex"
          @change="handleChange"
          style="z-index: 1"
      >
        <el-carousel-item v-for="(message,index) in messages" :key="message.id">
          <router-link :to="`/messageDetails/${message.id}`" style="text-decoration: none">
          <div class="message-content"
               :style="{ backgroundColor: activeIndex === index ? 'gold' : '' }"
               @click="showDetails(message.id)">
          <span>{{message.title}}</span>
          </div>
          </router-link>
        </el-carousel-item>
      </el-carousel>
      <div class="reading">
        <el-icon class="reading"><Reading /></el-icon>
      </div>
      <router-link to="/allMessage">
        <div class="allMsg" >
          <el-icon ><DataBoard /></el-icon>
        </div>
      </router-link>
    </div>

  </template>
  <script setup>
  import {ref} from "vue";
  import router from "@/router";

  const messages = [
        {
          "id": 1001,
          "title": "Gate.io已上線(WWW)永續合約交易(USDT結算),速来...",
          "time": "2023/10/7 15:30:08",
          "count": 3346,
          "toPath":"assets/message/message01.html",
          "content": "Gate.io永續合約是全球最活躍的區塊鏈資產合約市場之一，日交易量高達8億美金，擁有超過1000ETH的保險..."
        },
        {
          "id": 1002,
          "title": "以太坊最新会议:Devnet-9当前网参与率接近90%,NB...",
          "time": "2023/10/7 22:38:08",
          "count": 1008,
          "toPath":"assets/message/message02.html",
          "content": "PANews 10月7日消息，Galaxy研究副总裁Christine Kim发文总结第119次以太坊核心开发者共识会议（ACD..."
        },
        {
          "id": 1003,
          "title": "Tip组织最新会议:发现Epoch 2申领相关问题,完犊子...",
          "time": "2023/10/7 15:30:08",
          "count": 1346,
          "toPath":"assets/message/message03.html",
          "content": "10月7日消息，Web3社交应用Tip Coin于5:00左右开启Epoch 2阶段申领，随后发文表示，发现申领相关问题..."
        },
        {
          "id": 1004,
          "title": "Caroline Ellison或将于下周二SBF审判中出庭作证,恐怖",
          "time": "2023/10/7 07:30:00",
          "count": 10086,
          "toPath":"assets/message/message04.html",
          "content": "PANews 10月7日消息，据CoinDesk报道，对冲基金Alameda Research前首席执行官Caroline Ellison很可..."
        },
        {
          "id": 1005,
          "title": "英国因青少年隐私问题对Snap AI聊天机器人展开调查",
          "time": "2023/10/7 05:10:18",
          "count": 14651,
          "toPath":"assets/message/message05.html",
          "content": "据站长之家 10 月 7 日报道，Snap 公司因其生成式人工智能聊天机器人可能对 Snapchat 用户，尤其是 13 至 ..."
        }
      ];
  const activeIndex = ref(0); // 当前激活的轮播项索引
  const handleChange = (index) => {
    activeIndex.value = index;
  };
  const showDetails = (id) => {
    router.push(`/messageDetails/${id}`);
  };
  </script>

  <style scoped>
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #475669;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .message{
    width: 98%;
    margin-top: 10px;
  }
  .reading{
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-top: -60px;
    z-index: 2;
  }
  .allMsg{
    position: absolute;
    right: 70px;
    margin-top: -10px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    z-index: 2;
  }
  .message-content{
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>